<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8"%>

<%@ include file="../include/head.jsp"%>
<%@ include file="../include/top.jsp"%>
<%@ include file="../include/left.jsp"%>

<div class="main-content">

	<%@ include file="../include/navigate.jsp" %>
	
	<div class="container">
		<div id="saveStatus"></div>
		
		<div class="widget-box">
			<div class="widget-box-header">
				<div class="col-sm-10">
					<div class="title">XML作业列表</div>
				</div>
				<div class="col-sm-2" align="right" style="margin-top: 2px; text-align: right;">
					<div class="btn-group-sm" style="padding: 2px;">
						<button type="button" class="btn btn-default btn-sm glyphicon glyphicon-plus" id="dropdownMenu1" data-toggle="dropdown"> 新建</button>

						<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
							<li role="presentation">
								<a role="menuitem" tabindex="-1" href="${pageContext.request.contextPath}/EtlXml/addTemplate">新建模板</a>
							</li>
							<li role="presentation" class="divider"></li>
							<li role="presentation">
								<a role="menuitem" tabindex="-1" href="${pageContext.request.contextPath}/EtlXml/add">新建简单任务</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="widget-box-content" style="padding: 15px;">
				<div class="dataTables_wrapper form-inline">
					<div class="table-responsive">
						<table class="table table-hover">
							<thead>
								<tr>
									<th>ETL作业名称</th>
									<th>类型</th>
									<th>创建时间</th>
									<th>创建用户</th>
									<th sytle="text-align:center;" >操作</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach items="${jobs}" var="job">
									<tr>
										<td><kbd>${job.xmlJobName}</kbd></td>
										<c:if test="${job.jobType == 'job'}"> 
											<td>标准作业</td>
										</c:if>
										<c:if test="${job.jobType == 'simple_job'}"> 
											<td>简单作业</td>
										</c:if>
										<c:if test="${job.jobType == 'template'}"> 
											<td>模板</td>
										</c:if>
										<td><fmt:formatDate value="${job.createTime}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
										<td>${job.createUser}</td>
										<td>
											<div class="btn-group">
												<button class="btn btn-success" onclick="window.location='${pageContext.request.contextPath}/template_para/editJobOrTemp?type=${job.jobType}&id=${job.xmlJobId}'">编辑</button> 
												<button type="button" class="btn btn-primary" onclick="previewJob(${job.xmlJobId})">预览</button>
												<c:if test="${job.jobType == 'template'}"> 
													<button type="button" class="btn btn-warning" onclick="window.location='${pageContext.request.contextPath}/template_para/addStandardJob?tempId=${job.xmlJobId}'">新建作业</button>
												</c:if>
												<c:if test="${job.jobType != 'template'}"> 
													<button type="button" class="btn btn-warning" onclick="executeOnce(${job.xmlJobId})">提交任务</button>
												</c:if>
												<button class="btn btn-danger" onclick="openModal('${pageContext.request.contextPath}/template_para/del?id=${job.xmlJobId}','删除此作业或模板？','作业或模板被删除之后无法恢复，是否继续？')">删除</button>
											</div>
										</td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="row clearfix ">
			<div class="col-md-12" align="center">
				<nav>
					<ul class="pagination pagination-sm">
					</ul>
				</nav>
			</div>
		</div>
	</div>

	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">请选择要使用的模板</h4>
				</div>
				<div class="modal-body">
					<div id="rootwizard">
						<div class="navbar" style="display:none;">
							<div class="navbar-inner">
								<div class="container">
									<ul id="tabs">
										<li id="tabName1"><a href="#tab1" data-toggle="tab"></a></li>
										<li id="tabName2"><a href="#tab2" data-toggle="tab"></a></li>
										<li id="tabName3"><a href="#tab3" data-toggle="tab"></a></li>
										<li id="tabName4"><a href="#tab4" data-toggle="tab"></a></li>
										<li id="tabName5"><a href="#tab5" data-toggle="tab"></a></li>
										<li id="tabName6"><a href="#tab6" data-toggle="tab"></a></li>
										<li id="tabName7"><a href="#tab7" data-toggle="tab"></a></li>
									</ul>
								</div>
							</div>
						</div>
						<div class="tab-content" style="height:300px;">
							<div class="tab-pane" id="tab1" style="height: 260px;">
								<select class="form-control" id="template_selector">
									<c:forEach items="${jobs}" var="job">
										<c:if test="${job.jobType == 'template'}">
											<option value="${job.xmlJobId}">${job.xmlJobName}</option>
										</c:if>
									</c:forEach>
								</select>
							</div>
							<div class="tab-pane" id="tab2" style="height:260px;">
								<label id="tab2_haventload"></label>
								<div class="form-group">
									<label class="col-sm-3 control-label" style="margin-top:6px;">XML作业名称:</label> 

									<div class="col-sm-8">
										<input type="text" class="form-control" name="username" placeholder="用户名称" data-toggle="tooltip" data-placement="left" required="">
									</div>
								</div>
							</div>
							<div class="tab-pane" id="tab3" style="height:260px;">
								<label id="tab3_haventload"></label>
							</div>
							<div class="tab-pane" id="tab4" style="height:260px;">
								<label id="tab3_haventload"></label>
							</div>
							<div class="tab-pane" id="tab5" style="height:260px;">
								<label id="tab3_haventload"></label>
							</div>
							<div class="tab-pane" id="tab6" style="height:260px;">
								<label id="tab3_haventload"></label>
							</div>
							<div class="tab-pane" id="tab7" style="height:260px;">
								<label id="tab3_haventload"></label>
							</div>
							
							<ul class="pager wizard" style="display:inline;margin-top:100px;"> 
								<li class="previous"><a href="#">上一步</a></li>
								<li class="next"><a href="#">下一步</a></li>
								<li class="next finish" style="display:none;"><a href="#">生成作业！</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="jobScript" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">作业脚本预览</h4>
				</div>
				<div class="modal-body" style="height:500px;">
					<pre id="editor" style="height:450px;"></pre>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
	
		function previewJob(jobId){
			$.ajax({  
	        	type:'post',
	            url: '/template_para/showFinalScript',
	            data: { "xmlJobId": jobId },  
	            cache:false,    
	            dataType:'json',    
	            success: function(data) {
	            	var editor = ace.edit("editor");
	        	    editor.session.setMode("ace/mode/xml");
	        	    editor.setValue(data);
	        	    editor.setReadOnly(true);
	        	    
	            	$('#jobScript').modal('show');
	            },    
	            error : function() {
	            	operationFailed();
	            }
	        });
		}
	
		function executeOnce(jobId){
			$.ajax({  
	        	type:'post',
	            url: '/template_para/executeOnce',
	            data: { "xmlJobId": jobId },  
	            cache:false,    
	            dataType:'json',    
	            success: function(data) {
	            	if ("success" == data){
		            	operationSuccessWithMessage("成功提交，请在执行日志中查看执行情况！");
	            	} else {
	            		operationFailedWithMessage(data);
	            	}
	            },    
	            error : function() {
	            	operationFailed();
	            }
	        });
		}
		
		$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
			var total = navigation.find('li').length;
			var current = index+1;
			
			if(current == 2){
				var templateId = $("#template_selector").val();
				$.ajax({  
		        	type:'post',
		            url: '/template_para/getTemplateParamDefs',
		            data: { "templateId": templateId },  
		            cache:false,    
		            dataType:'json',    
		            success: function(data) {
		            	console.log(data);
		            },    
		            error : function() {
		            	operationFailed();
		            }
		        });
				$("#tabName4").remove();
				$("#tabName5").remove();
				$("#tabName6").remove();
				$("#tabName7").remove();
			}
			
			if(current >= total) {
				$('#rootwizard').find('.pager .next').hide();
				$('#rootwizard').find('.pager .finish').show();
				$('#rootwizard').find('.pager .finish').removeClass('disabled');
			} else {
				$('#rootwizard').find('.pager .next').show();
				$('#rootwizard').find('.pager .finish').hide();
			}
			
		}});
		
	    $('.pagination').twbsPagination({
	        totalPages: ${pageInfo.pages},
	        visiblePages: 5,
	        href: '?page={{number}}'
	    });
	</script>

		<div style="position: fixed; bottom: 0px; width: 100%;" align="center">
			<%@ include file="../include/footer.jsp"%>
		</div>
	</div>

	<%@ include file="../include/bottom.jsp"%>